<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center bkblist">
        <div class="main-left">
          <div class="con2">
            <div class="nav-tit">
              <div class="mleft">
                <h1 class="cur">我的备课包</h1>
                <p>共有{{ totalBkb }}个备课</p>
              </div>
              <div class="mright">
                <img src="static/img/t-huisz.png" @click="goSc()" />
                <div class="ttp-px" style="display: inline-block">
                  <img src="static/img/t-px.png" />

                  <div class="ttp">
                    <p :class="{ cur: order_type == 'default' }" @click="OrderBy('default')">默认排序</p>
                    <p :class="{ cur: order_type == 'time' }" @click="OrderBy('time')">时间排序</p>
                    <!-- <p :class="{ cur: order_type == 'class_sort' }" @click="OrderBy('class_sort')">班级排序</p>-->
                  </div>
                </div>

                <img src="static/img/t-pl.png" width="24" v-if="isList == true" @click="setList(0)" />
                <img src="static/img/t-list.png" width="24" v-if="isList == false" @click="setList(1)" />

                <el-input v-model="keyword" style="width: 223px" class="fl search-inp" placeholder="输入名称搜索"></el-input>
                <el-button class="fl" @click="handleCurrentChange(1)">搜索</el-button>
              </div>
            </div>
            <div class="clear"></div>
            <!-- 分享 -->
            <div class="selectChapter uploadDig" v-if="isShare == true">
              <div class="title">
                分享
                <span class="closed" @click="isShare = false">
                  <img src="static/img/close.png" />
                </span>
              </div>
              <div class="cont">
                <div class="space-tj">请选择分享位置</div>
                <ul style="height: 250px">
                  <li class="mt30">
                    <el-select style="width: 100%" v-model="group_id" placeholder="请选择">
                      <el-option label="全网" value="1"></el-option>
                      <el-option label="本校" value="2"></el-option>
                    </el-select>
                  </li>
                </ul>
                <div class="mt30 baseAct width100">
                  <button class="cancel" type="info" @click="isShare = false">取消</button>
                  <button @click="shareLiqr()" class="sure">确定</button>
                </div>
              </div>
            </div>

            <ul class="bkb-list-gr" v-if="listData.length > 0 && isList == false">
              <template v-for="(item, i) in listData">
                <li :key="'bkb_list_'+i">
                  <div class="pic">
                    <img src="static/img/yinyong_ok.png" class="yinyong_ok" v-if="item.y_id > 0" />
                    <img class="pic" :src="item.cover_image" @click="goCourseView(i, item)" />
                  </div>
                  <div class="txt">
                    <p @click="
                        isDownloadBkb = true;
                        currentDownload = item;
                      ">
                      <span class="tit">{{ item.title }}</span>
                    </p>
                    <p>
                      <label class>课件：{{ item.number }}</label>
                      <label class="date fr">{{ item.createtime_text }}</label>
                      <br />
                      {{ item.cat_name }}
                    </p>
                    <p>
                      <label class="txt-l" @click="goCourseView(i, item)">
                        <img src="static/img/t-pc.png" class="t-pc" />
                        授课
                      </label>
                    </p>

                    <div class="txt-r">
                      <label class="top mr40" @click="setTop(i, item)">置顶</label>
                      <label class="edit mr40" @click="editInfo(i, item)">修改</label>
                      <label class="download mr40" @click="
                          isDownloadBkb = true;
                          currentDownload = item;
                        ">下载</label>
                      <label class="delete mr40" @click="delInfo(i, item)">删除</label>

                      <div class="shareLi">
                        <label class="share" @click="shareInfo(i, item)">分享</label>
                      </div>
                    </div>
                  </div>
                </li>
              </template>
            </ul>

            <ul class="bkb-list" v-if="listData.length > 0 && isList == true">
              <template v-for="(item, i) in listData">
                <li :key="i">
                  <img src="static/img/yinyong_ok.png" class="yinyong_ok" v-if="item.y_id > 0" />
                  <div class="act-do">
                    <img class="s_pic" @click="setTop(i, item)" src="static/img/t-top2.png" />
                    <img class="s_pic" @click="editInfo(i, item)" src="static/img/s_edit.png" />
                    <img class="s_pic" @click="
                        isDownloadBkb = true;
                        currentDownload = item;
                      " src="static/img/s_download.png" />
                    <div class="shareLi" @click="shareInfo(i, item)">
                      <img class="s_pic" src="static/img/s_share.png" />
                      <!-- <div class="tip-a">
                        <i></i>
                        <p @click="shareLi(i, item, 1)">全网</p>
                        <p @click="shareLi(i, item, 2)">本校</p>
                      </div>-->
                    </div>

                    <img class="s_pic" @click="delInfo(i, item)" src="static/img/s_del.png" />
                  </div>

                  <div class="pic_area" @click="goCourseView(i, item)">
                    <img :src="item.cover_image" />
                  </div>
                  <p class="c-title" @click="goCourseView(i, item)">
                    <span class="tit tit-ellipsis">{{ item.title }}</span>
                    <label class="fr">
                      <img src="static/img/t-pc.png" class="t-pc" />
                    </label>
                  </p>
                  <p>{{ item.cat_name }}</p>
                  <p>
                    <label class>课件：{{ item.number }}</label>
                    <label class="date fr">{{ item.createtime_text }}</label>
                  </p>
                </li>
              </template>
            </ul>
            <el-empty :image-size="200" v-if="listData.length == 0"></el-empty>
            <div class="page-area" v-if="listData.length > 0">
              <span type="button" class="btn-home fl" style="cursor: pointer"
                @click="getCatList(order_type, current, 1, keyword, 0)">首页</span>
              <el-pagination background layout="  prev, pager, next " :current-page="currentPage" :total="total"
                :page-size="1" @current-change="handleCurrentChange"></el-pagination>
              <span type="button" style="cursor: pointer" class="btn-last fr"
                @click="getCatList(order_type, current, total, keyword, 0)">尾页</span>
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="con-menu" @click="openYun()">
            <div class="menu-img">
              <img src="static/img/r-ykt.png" alt />
            </div>
            <div class="menu-item">中华经典云课堂</div>
          </div>

          <div class="con-menu2" @click="uploadBkb()">
            <div class="menu-img">
              <img src="static/img/r-upload.png" alt />
            </div>
            <div class="menu-item">上传备课包</div>
          </div>
          <div class="con-menu2" @click="goAdd()">
            <div class="menu-img">
              <img src="static/img/r-xj.png" alt />
            </div>
            <div class="menu-item">新建备课包</div>
          </div>

          <div class="con-menu2" @click="goBkbShare()">
            <div class="menu-img">
              <img src="static/img/r-gx.png" alt />
            </div>
            <div class="menu-item">共享资源包</div>
          </div>
          <div class="con-menu2" @click="goHome()">
            <div class="menu-img">
              <img src="static/img/r-home.png" alt />
            </div>
            <div class="menu-item">首页</div>
          </div>
        </div>
      </div>
    </div>

    <div class="step_task" v-if="isTask == true">
      <div class="do">
        <img src="static/img/t-down.png" alt />
      </div>
      <ul>
        <li class="loading">
          正在打包备课包
          <span class="fr">6年级国学课</span>
        </li>
        <li class="ok">
          正在打包备课包
          <span class="fr">6年级国学课</span>
        </li>
        <li class="loading">
          正在打包备课包
          <span class="fr">6年级国学课</span>
        </li>
        <li class="ok">
          正在打包备课包
          <span class="fr">6年级国学课</span>
        </li>
      </ul>
    </div>

    <div class="maskBg" v-if="isOpen == true || isUpload == true"></div>
    <!-- 云课堂弹出层 -->
    <div class="selectDig ykt-dig" v-if="isOpen == true">
      <div class="title">
        <span>中华经典云课堂</span>
        <span class="closed" @click="isOpen = false">
          <img src="static/img/close.png" />
        </span>
      </div>
      <div class="cont">
        <div class="filter">
          <dl>
            <dt style="width: auto">课程：</dt>
            <template v-for="(vo, j) in yunClass">
              <dd :class="{ cur: cid == vo.id }" @click="selectCh(j, vo.id)">{{ vo.name }}</dd>
            </template>
          </dl>
        </div>
        <a id="links" href="#" target="_blank" style="display: none"></a>
        <ul class="kc-list">
          <template v-for="(item, i) in listYunData">
            <li @click="detailOpen(i, item)">
              <!---  // @change="
                //isDetailOpen = true;
               // currentCourse = item;
              "-->
              <div class="pic_area">
                <img :src="item.image" />
              </div>
              <p>
                <span class="tit">{{ item.name }}</span>
              </p>
            </li>
          </template>
        </ul>

        <el-empty :image-size="200" v-if="listYunData.length == 0"></el-empty>
        <div class="page-area" v-if="listYunData.length > 0">
          <span type="button" class="btn-home fl" style="cursor: pointer"
            @click="getYunList(cid, yun.current, 1)">首页</span>
          <el-pagination background layout="  prev, pager, next " :current-page="yun.currentPage" :total="yun.total"
            :page-size="1" @current-change="handleYunCurrentChange"></el-pagination>
          <span type="button" style="cursor: pointer" class="btn-last fr"
            @click="getYunList(cid, yun.current, yun.total)">尾页</span>
        </div>
      </div>
    </div>
    <!-- 云课堂内容弹出层 -->
    <div class="selectDig" v-if="isDetailOpen == true">
      <div class="title">
        <span>{{ currentCourse.name }}</span>
        <span class="closed" @click="isDetailOpen = false">
          <img src="static/img/close.png" />
        </span>
      </div>
      <div class="cont" style="padding: 0">
        <iframe style="width: 100%; height: 100%" :src="currentCourse.file_path"></iframe>
      </div>
    </div>

    <div class="selectChapter uploadDig" v-if="isUpload == true">
      <div class="title">
        上传
        <span class="closed" @click="isUpload = false">
          <img src="static/img/close.png" />
        </span>
      </div>
      <div class="cont">
        <ul style="height: 250px">
          <li class="mt30">
            <el-upload class="upload-demo" :action="uploadUrl" :on-success="handleUpSuccess" :file-list="fileList"
              :on-exceed="handleOver" :limit="1" :accept="'zip'" :before-upload="beforeUpload_u">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传压缩包，且单次最多传一个</div>
            </el-upload>
          </li>
        </ul>
        <div class="mt30 baseAct width100">
          <button class="cancel" type="info" @click="isUpload = false">取消</button>
          <button @click="saveUploadFile" class="sure">确定</button>
        </div>
      </div>
    </div>

    <!-- 下载弹出层 -->
    <div class="myDig" v-if="isDownloadBkb == true">
      <div class="title">
        提示
        <span class="closed" @click="isDownloadBkb = false">
          <img src="static/img/closed.png" />
        </span>
      </div>
      <div class="cont">
        <p class="cont-tip" v-if="currentDownload.zippath > ''">是否下载该资源包</p>
        <p class="cont-tip" v-else>压缩包正在打包</p>
        <div class style="display: flex; justify-content: space-around; width: 100%">
          <a class="downloadBtn" @click="isDownloadBkb = false">取消</a>
          <a class="downloadBtn" v-if="currentDownload.zippath > ''" @click="isDownloadBkb = false"
            :href="currentDownload.zippath">确定</a>
        </div>
      </div>
    </div>
    <div class>
      <el-dialog title="上课班级" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="form">
          <el-form-item label="班级" :label-width="formLabelWidth">
            <el-select v-model="form.class_id" placeholder="请选择上课班级">
              <el-option v-for="item in classData" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="goCourSure()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Header from '../../components/header_lecture.vue'
  export default {
    data() {
      return {
        token: localStorage.getItem('token'),
        uploadUrl: this.$brid + '/api/common/oss_upload',
        fileList: [], //文件列表
        fileName: '', //上传文件名称
        filePath: '', //上传文件路径
        isOrder: false,
        isTask: false,
        isOpen: false,
        isList: false,
        isUpload: false,
        isShare: false,
        order_type: 'default',
        total: 0,
        page: 1,
        page_size: 8,
        current: -1,
        categoryId: '',
        currentPage: 1,
        group_id: '',
        itemId: '',
        cid: 0,
        yun: {
          total: 0,
          page: 1,
          page_size: 14,
          current: -1,
          cid: '',
          currentPage: 1,
        },
        yunClass: [],
        listYunData: [],
        grades_id: '',
        sort: '',
        keyword: '', //搜索值,
        listData: [],
        isDetailOpen: false,
        currentCourse: {},
        userAuth: '',
        isDownloadBkb: false,
        currentDownload: {},
        totalBkb: 0,
        dialogFormVisible: false,
        form: {
          class_id: '', //上课班级id
        },
        bid: '',
        formLabelWidth: '100px',
        classData: [], //上课班级列表
      }
    },
    created() {
      this.handleCurrentChange(1)
      this.userAuth = JSON.parse(localStorage.getItem('userAuth'))
      localStorage.setItem('pagehide', false)
      this.isList = localStorage.getItem('isList') == 1 ? true : false
    },
    methods: {
      setList(t) {
        this.isList = t == 1 ? true : false
        localStorage.setItem('isList', t)
        //console.log(localStorage.getItem('isList'))
      },

      classChange() {
        this.classData = []
        let form = {
          token: this.token,
        }
        this.$api('grades.classlist').then((res) => {
          res.data.forEach((item) => {
            var data = {}
            data.label = item.grade_text
            data.value = item.class_id
            this.classData.push(data)
            // //console.log(this.classData);
          })
          if (this.classData.length == 1) {
            this.form.class_id = this.classData[0].value
            this.goCourSure()
          } else {
            if (this.classData.length == 0) {
              this.$message({
                message: '请先前往“我的”添加您的授课班级。',
                type: 'warning',
              })
              return
            } else {
              this.dialogFormVisible = true
            }
          }
        })
      },
      getCatList(order_type, index, page = 1, keyword, del = 0) {
        if (page == 1) {
          this.currentPage = 1
        } else if (page == this.total) {
          this.currentPage = this.total
        }
        this.page = page
        this.order_type = order_type
        this.current = index
        this.keyword = keyword

        let all_form = {
          order_type: this.order_type,
          page: this.page,
          limit: this.page_size,
          del: del,
          search: this.keyword,
          token: localStorage.getItem('token'),
        }
        this.$api('resources.myBclassList', all_form).then((res) => {
          this.listData = res.data.data
          //console.log('====this.listData=?>>')
          //console.log(this.listData)
          this.total = res.data.last_page
          this.totalBkb = res.data.total
        })
      },
      beforeUpload_u(file, fileList) {
        var bool = false
        var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (testmsg === 'zip' || testmsg === 'raw' || testmsg === 'zhp') {
          bool = true
        } else {
          bool = false
        }
        if (bool == false) {
          this.$message({
            type: 'info',
            message: '文件格式不对',
          })
        }
        return bool
      },

      handleCurrentChange(page) {
        this.currentPage = page
        this.getCatList(this.order_type, this.current, page, this.keyword, 0)
      },
      OrderBy(type) {
        this.order_type = type
        this.isOrder = false
        this.handleCurrentChange(1)
      },

      getYunClass() {
        this.$api('cloud.class', {}).then((res) => {
          this.yunClass = res.data
          this.cid = this.yunClass[0].id
          this.getYunList(this.cid, 1, 1)
        })
      },

      handleYunCurrentChange(page) {
        this.yun.currentPage = page
        this.getYunList(this.cid, this.current, page)
      },

      getYunList(cid, index, page = 1) {
        //console.log(cid)
        //console.log('page:' + page)
        if (page == 1) {
          this.yun.currentPage = 1
        } else if (page == this.yun.total) {
          this.yun.currentPage = this.yun.total
        }
        this.yun.page = page
        this.yun.cid = cid
        this.yun.current = index
        this.yun.page = page
        this.yun.limit = this.yun.page_size
        this.$api('cloud.room', this.yun).then((res) => {
          this.listYunData = res.data.data
          this.yun.total = res.data.last_page
        })
      },
      openYun() {
        if (this.userAuth.is_yuncource) {
          this.isOpen = true
          this.getYunClass()
        } else {
          this.$message.error('该模块未授权，请联系管理员')
        }
      },
      detailOpen(index, item) {
        this.$api('getResources', {
          c_id: this.cid,
          id: item.id,
        }).then((res) => {
          if (res.code == 1) {
            let routeUrl = this.$router.resolve({
              path: '/classDetail',
              query: {
                id: item.id,
              },
            })
            window.open(routeUrl.href, '_blank')
          } else {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })

        // this.$router.push('?id=' + );
        // localStorage.setItem('currentInfo', JSON.stringify(item));
        // var obj = document.getElementById('links');
        // obj.href = '/#/frame?url=' + item.file_path;
        // obj.click();
      },
      selectCh(index, id) {
        this.cid = id
        //console.log(this.cid)
        this.getYunList(this.cid, this.yun.current, 1)
      },
      goCourSure() {
        if (this.form.class_id == '') {
          this.$message({
            message: '请选择上课班级',
            type: 'warning',
          })
          return
        }
        this.$api('resources.classbegins', {
          token: this.token,
        }).then((res) => {
          if (res.code == 0) {
            this.$confirm(res.msg, '提示', {
                distinguishCancelAndClose: true,
                confirmButtonText: '继续上课',
                cancelButtonText: '结束上课',
                type: 'warning',
              })
              .then(() => {
                this.$router.replace(
                  '/courseView?bid=' +
                  this.bid +
                  '&grades_id=' +
                  this.form.class_id +
                  '&log_id=' +
                  res.data.id
                )
                return
              })
              .catch((action) => {
                //console.log(action)
                if (action == 'cancel') {
                  let form = {
                    log_id: res.data.id,
                    token: localStorage.getItem('token'),
                  }
                  this.$api('grades.endClass', form).then((res) => {
                    return
                  })
                  this.dialogFormVisible = false
                  this.form.class_id = ''
                }
              })
          } else {
            if (this.classData.length == 0) {
              this.$message({
                message: '当前无可授课班级，请在个人中心选择授课班级。',
                type: 'warning',
              })
            } else {
              this.$router.replace(
                '/courseView?bid=' + this.bid + '&grades_id=' + this.form.class_id
              )
            }
          }
        })
      },
      goCourseView(index, item) {
        this.bid = item.id
        this.classChange()
      },

      setTop(index, item) {
        this.$api('resources.setWeigh', {
          id: item.id,
          token: this.token,
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'info',
          })
          this.order_type = 'default'
          this.handleCurrentChange(1)
        })
      },
      shareLi(index, item, type) {
        this.isShare = true
        this.listData[index].isShare = 1
        this.itemId = item.id
      },
      shareInfo(index, item) {
        this.isShare = true
        this.cid = item.id
        this.itemId = item.id
        this.getYunList()
      },
      shareLiqr() {
        this.$api('resources.share', {
          id: this.itemId,
          type: this.group_id,
        }).then((res) => {
          this.isShare = false
          if (res.code == 1) {
            this.$message.success(res.msg)
          } else if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      },
      editInfo(index, item) {
        this.$router.push({
          path: '/lessonsadd?bid=' + item.id,
          query: {
            page: 'bkb'
          },
        })
      },
      downloadInfo(index, item) {
        this.cid = item.id
        this.getYunList()
      },
      delInfo(index, item) {
        this.$confirm('确定要删除  ?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            this.$api('resources.delBclass', {
              id: item.id,
            }).then((res) => {
              if (res.code == 1) {
                this.$message.success(res.msg)
                this.form = {}
                this.handleCurrentChange(1)
              } else if (res.code == 0) {
                this.$message({
                  message: res.msg,
                  type: 'warning',
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      },
      saveUploadFile() {
        if (this.filePath == '') {
          this.$message({
            type: 'info',
            message: '未选择文件/文件正在上传中，请耐心等候',
          })
          return
        }
        //  //console.log(this.fileName);
        var form = {
          token: localStorage.getItem('token'),
          path: this.filePath,
          name: this.fileName,
        }
        this.$api('space.userUploads', form).then((res) => {
          if (res.code == 1) {
            this.$message.success('上传成功')
            this.fileName = ''
            this.filePath = ''
            this.handleCurrentChange(1)
            this.isUpload = false

            // this.spaceFileList();
          } else if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      },
      handleUpSuccess(res, fileList) {
        //console.log(res)
        this.fileName = res.data.name
        this.filePath = res.data.url
        //console.log(this.fileName)
        // this.fileList = fileList[0];
        // if (this.attachment_id == 0) {
        //   this.attachment_id = res.data.attachment_id;
        // } else {
        //   this.attachment_id = this.attachment_id + ',' + res.data.attachment_id;
        // }
      },
      handleOver(files, fileList) {
        this.$message.warning(`单次最多传一个压缩包`)
      },
      goSc() {
        this.$router.push('/recycle')
      },
      goBkbShare() {
        this.$router.push('/shareall')
      },
      goLessons() {
        this.$router.push('/selectDig')
      },
      uploadBkb() {
        this.isUpload = true
      },
      goAdd() {
        this.$router.push('/lessonsadd')
      },
      goHome() {
        // this.$router.push(localStorage.getItem('jump_path'))
        // this.$router.go(-1)


        this.$router.push('/lecture');
      },
      goDetail() {
        this.$router.push('/courseView')
      },
    },
    components: {
      Header,
    },
  }

</script>

<style lang="scss" scoped>
  /deep/ .el-input__inner {
    height: 36px;
    line-height: 35px;
    outline: 0;
  }

  .cont-tip {
    margin-bottom: 100px;
  }

  .downloadBtn {
    background: #55e4c2;
    padding: 0 22px;
    height: 36px;
    line-height: 36px;
    color: #ffffff;
    font-size: 18px;
    border-radius: 6px;
    line-height: 36px;
    cursor: pointer;
  }

  .c-title {
    display: flex;

    .tit {
      flex: 1;
    }

    .fr {
      padding-top: 6px;
    }
  }

  .bkb-list-gr {
    li {
      display: flex;
      align-items: center;
    }
  }

  .bkblist {
    display: flex;
    justify-content: space-between;
    padding-bottom: 30px;

    .main-left,
    .main-right {
      float: inherit;
    }

    .main-right {
      height: 366px;
    }
  }

  .bkb-list-gr .txt p {
    margin-bottom: 0px;
    line-height: 26px;
  }

</style>
